// 虚拟DOM元素的类，构建实例对象，用来描述DOM
class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children
    }
}

// 负责创建虚拟DOM，以后可以代替真实的DOM，提高网页性能
function createElement(type, props, children) {
    return new Element(type, props, children);
}

// React.render
// react 16之前 组件使用calss写法写组件，一定有render方法
// render方法负责将虚拟DOM对象转化成真实DOM对象
function render(domObj) {
    // Element --> DOM 
    // console.log(domObj);
    let el = document.createElement(domObj.type);
    for (let key in domObj.props) {
        el.setAttribute(key, domObj.props[key])
    }
    // JSX --> VD 使用正则实现
    domObj.children.forEach(child => {
        child = (child instanceof Element) ? render(child) : document.createTextNode(child)
        el.appendChild(child);
    })
    return el
}

// 引入时要解构则不能使用dafult,单独使用export才能解构
export {
    createElement,
    Element,
    render
}